<template>
  <div>
    <el-container class="container">
      <el-aside :width="$store.state.expand.mauncollapse?'auto':'200px'">
       <div class="imgs">
         <img :class="$store.state.expand.mauncollapse?'img1':'img2'":src="$store.state.expand.mauncollapse?img2:img1" >
       </div>
        <side/>
      </el-aside>
      <el-container>
        <el-header>
          <haedto/>
        </el-header>
        <Label/>
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import side from "@/views/admin/component/side";
import haedto from "@/views/admin/component/headto";
import Label from "@/views/admin/component/Label";
export default {
  name: "admin.vue",
  components: {
    side,
    haedto,
    Label,
  },
  data(){
    return{
      img1:'https://api.java.crmeb.net/crmebimage/operation/2021/07/13/834580d86f1c43529247fedf3c4304a51twgcts5bs.png',
      img2:'https://api.java.crmeb.net/crmebimage/product/2020/07/29/398c165115c247ba8ae79fc5cade8226tpf3ap2and.png'
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  height: 100vh;
  .el-header {
    background: #caddf0;
  }
}
.el-aside {
  background: rgb(49, 77, 102);
}
.container .el-header[data-v-2ba5fe30] {
  background: #ffff;
  padding: 0;
}
.imgs{
  line-height: 65px;
  text-align: center;
}
.img1{
  width:35px;
  height:35px;
  vertical-align: middle;
}
.img2{
  height: 40px;
  vertical-align: middle;
  margin-right: 12px;
}
</style>
